<template>
  <div class="content">
    <div class="content-block">
      <Navigation
          :navigation-list="[{id:1,value:'首页',url:'/home/index'},{id:2,value:'招聘会详情',url:''}]"></Navigation>
      <div class="information-block">
        <div class="title-block">
          <div class="top-block">
            <div class="title">{{topList.title }}</div>
            <div class="time-block">
              <img src="@/assets/images/jobFair/shijian.png" class="iconfont">
              <div class="name">举办时间：{{ topList.eventTimeStart }} 至 {{ topList.eventTimeEnd }}</div>
            </div>
            <div class="time-block">
              <img src="@/assets/images/jobFair/zhu.png" class="iconfont">
              <div class="name">主办单位：{{ topList.organizerTake }}</div>
            </div>
            <div class="time-block">
              <img src="@/assets/images/jobFair/chen.png" class="iconfont">
              <div class="name">承办单位：{{ topList.organizer }}</div>
            </div>
            <div class="time-block">
              <img src="@/assets/images/jobFair/xie.png" class="iconfont">
              <div class="name">协办单位：{{ topList.organizerCo }}</div>
            </div>
          </div>
          <div class="bottom-block">
            <div class="job-item">
              <div class="job-name">招聘企业</div>
              <div class="count-item">
                <div class="count" @click="activeTabActive=2" style="cursor: pointer">{{ topList.qyCount }}</div>
                <div class="job-name">家</div>
              </div>
            </div>
            <div class="job-item">
              <div class="job-name">招聘职位</div>
              <div class="count-item">
                <div class="count" @click="activeTabActive=3" style="cursor: pointer">{{ topList.zwCount }}</div>
                <div class="job-name">个</div>
              </div>
            </div>
            <div class="job-item">
              <div class="job-name">简历投递数</div>
              <div class="count-item">
                <div class="count">{{ topList.resumeCount }}</div>
                <div class="job-name">个</div>
              </div>
            </div>
            <div class="job-item">
              <div class="job-name">浏览量</div>
              <div class="count-item">
                <div class="count">{{topList.browseNumber}}</div>
                <div class="job-name">次</div>
              </div>
            </div>
          </div>
        </div>
        <div class="active-block">
          <div class="block-title">
            <div class="line"></div>
            <div class="title" :class="activeTabActive===1?'active':''" @click="activeTabActive=1">活动介绍</div>
            <div class="title" :class="activeTabActive===2?'active':''" @click="activeTabActive=2">参会企业</div>
            <div class="title" :class="activeTabActive===3?'active':''" @click="activeTabActive=3">参会岗位</div>
          </div>
          <template v-if="activeTabActive===1">
            <div v-loading="activeLoading">
              <div class="article-content" v-html="topList.eventIntro"></div>
            </div>
          </template>

          <div v-if="activeTabActive===2" class="job-block">
            <template v-if="attentionList.length>0">
              <router-link :to="{name:'companyDetail',query:{id:item.id,sid:topList.id}}"
                           v-for="(item,index) in attentionList" :key="item.id" class="list-item"
                           :class="tabActive===item.id?'active':''">
                <img src="@/assets/images/company_default.png" class="photo" alt="" v-if="item.logoUrl===''">
                <img :src="item.logoUrl" class="photo" alt="">
                <div class="info-block">
                  <div class="name">{{ item.brandName }}</div>
                  <div class="other">{{ item.enterpriseName }} | {{ item.scaleName }}</div>
                  <div class="other">招聘职位{{ item.fairCount }}个</div>
                </div>
              </router-link>
            </template>
            <el-empty v-else style="margin-left: 300px;"></el-empty>
          </div>
          <div v-if="activeTabActive===3" class="job-block">
            <template v-if="publishList.length>0">
              <div class="position-block block" >
                <router-link :to="{name:'positionDetail',query:{id:item.id}}" v-for="item in publishList" :key="item.id" class="position-item">
                  <div class="name-block">
                    <div class="name">{{item.jobTitle}}</div>
                    <div class="wage">{{item.minSalary}}-{{item.maxSalary}}元</div>
                  </div>
                  <div class="other">{{item.jobAddress}} {{item.expRequireText}}</div>

                  <div class="label-block">
                    <div class="label-item">{{item.minEducationText}} </div>
                  </div>
                </router-link>
              </div>
            </template>
            <el-empty v-else style="padding-left: 40%"></el-empty>
          </div>
          <div @click="jobOrder(topList.id)" class="btn2" v-if="identity!=1&&topList.state==1">在线预定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Navigation from "@/components/Navigation/Navigation";
import {findAllByIdApi, getByFairApi, getPublishByFairApi} from "@/api/jobFair";
import {mapGetters} from "vuex";

export default {
  name: "JobFair",
  components: {Navigation},
  data() {
    return {
      activeLoading:false,
      activeTabActive: 1,
      tabActive: 0,
      topList: {
        title: '',
        eventTimeStart: '',
        eventTimeEnd: '',
        organizerTake: '',
        organizer: '',
        organizerCo: '',
        qyCount: '',
        zwCount: '',
        gwCount: '',
        jlCount: '',
        browseNumber: '',
        resumeCount: '',
        eventIntro:'',
        state:''
      },
      identity: 1,
      attentionList: [{
        id:1,comName:'海威实创',enterpriseName:'海威实创',scaleName:'',fairCount:''
      }],
      publishList: [],
    }
  },
  methods: {
    findAllById(){
      this.activeLoading=true
      findAllByIdApi({id: this.id}).then((res)=>{
        if(res==null){
          this.$router.push({
            path: '/404'
          })
        }
        else{
          this.topList=res

        }
      }).finally(()=>{
        this.activeLoading=false
      })
    },
    jobOrder(id)
    {
      console.log(id)
      if(this.user.authenticationStatus==9)
      {
        this.$route.path({name: 'jobOrder',query:{id: id}})
      }else{
        this.$message.info('信息审核未通过');
      }

    },
    getByFairList(){
      this.activeLoading=true
      getByFairApi({sId: this.id}).then((res)=>{
        this.attentionList=res
      }).finally(()=>{
        this.activeLoading=false
      })
    },
    getPublishByFair(){
      this.activeLoading=true
      getPublishByFairApi({sId: this.id}).then((res)=>{
        this.publishList=res
      }).finally(()=>{
        this.activeLoading=false
      })
    },


  },
  mounted() {
    this.utils.createParams(this, this.$route.query);
    this.identity = this.$store.getters.identity;
    this.getByFairList()
    this.findAllById()
    this.getPublishByFair()

  },
  computed: {
    ...mapGetters(['user'])
  },
}
</script>

<style lang="scss" scoped>
.content {
  background-color: #F6F6F8;

  .content-block {
    width: $contentWidth;
    margin: 0 auto;
    min-height: $fullMinHeight;

    .information-block {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .title-block {
        width: calc(100% - 790px);

        .top-block {
          background-color: #fff;
          padding: 20px;
          border-radius: 10px;

          .title {
            font-size: 21px;
            font-weight: bold;
            border-bottom: 1px solid #e4e4e4;
            padding-bottom: 10px;
          }

          .time-block {
            display: flex;
            flex-direction: row;
            display: flex;
            align-items: center;
            margin-top: 10px;

            .iconfont {
              width: 15px;
              height: 15px;
              margin-right: 10px;
            }

            .name {
              font-size: 14px;
            }
          }
        }

        .bottom-block {
          margin-top: 20px;
          background-color: #fff;
          padding: 10px;
          border-radius: 10px;
          display: flex;
          flex-direction: row;
          margin-bottom: 20px;

          .job-item {
            display: flex;
            flex-direction: column;
            width: calc(100% / 4);
            align-items: center;
            border-right: #f0f0f0 1px solid;

            .job-name {
              font-size: 14px;
              margin-bottom: 10px;
              margin-top: 5px;
            }

            .count-item {
              display: flex;
              flex-direction: row;

              .count {
                color: $orange;
                font-size: 18px;
                font-weight: bold;
                margin-right: 2px;
              }

              .job-name {
                font-size: 14px;
              }
            }
          }

          .job-item:last-child {
            border-right: none;
          }
        }
      }

      .active-block {
        width: calc(100% - 430px);
        background-color: #fff;
        border-radius: 10px;
        margin-bottom: 20px;
        position: relative;
        .block-title {
          width: 100%;
          height: 70px;
          display: flex;
          flex-direction: row;
          align-items: center;
          padding: 0 30px;
          background: #fff;
          border-radius: 5px;
          cursor: pointer;

          .line {
            height: 23px;
            width: 10px;
            background: $orange;
            border-radius: 20px;
            margin-right: 10px;
          }

          .title {
            font-size: 20px;
            margin-right: 15px;
            color: $darkGray;
            font-weight: bold;
          }

          .title.active,
          {
            color: $orange;

          }
        }

        .article-content {
          padding: 0 30px;
          font-size: 20px;
          line-height: 35px;
          text-indent: 40px;
        }

        .job-block {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-between;
          padding: 20px;

          .list-item {
            width: calc((100% - 20px) / 2);
            display: flex;
            flex-direction: row;
            border-radius: 5px;
            background: #F7F5F6;
            padding: 10px;
            cursor: pointer;
            margin-bottom: 20px;

            .photo {
              width: 70px;
              height: 70px;
              border-radius: 5px;
              margin-right: 10px;
            }

            .info-block {
              width: calc(100% - 80px);
              display: flex;
              flex-direction: column;
              justify-content: center;

              .name {
                font-size: 16px;
                font-weight: bold;
              }
              .other {
                color: $darkGray;
                font-size: 14px;
                margin-top: 5px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
          .list-item.active {
            border: 1px solid $orange;
          }
          .position-block{
            flex-direction: row;
            padding-left: 20px;
            padding-right: 20px;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            .position-item{
              width: 46%;
              margin-right: 20px;
              background: #fff;
              box-shadow: 0 0 5px 0 #dfdfdf;
              border-radius: 10px;
              padding:15px;
              margin-bottom: 20px;
              display: flex;
              flex-direction: column;
              cursor: pointer;
              .name-block{
                font-size: 20px;
                font-weight: bold;
                display: flex;
                flex-direction: row;
                align-items: center;
                .name{
                  font-size: 18px;
                  flex-grow: 1;
                  width: 18px;
                  height: 28px;
                  overflow: hidden;
                }
                .wage{
                  flex-grow: 0;
                  color: $orange;
                  font-size: 17px;
                }
              }
              .other{
                color: $darkGray;
                font-size: 14px;
                margin-top: 10px;
              }
              .label-block{
                margin-top: 10px;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                width: 100%;
                .label-item{
                  margin-right: 8px;
                  margin-bottom: 8px;
                  padding: 2px 6px;
                  border-radius: 4px;
                  font-size: 14px;
                  color:$darkGray;
                  background: $lightGray;
                }
              }
            }
            .position-item:nth-child(3n){
              margin-right: 0;
            }
          }
        }

        .btn2 {
          width: 180px;
          height: 45px;
          margin: 30px auto;
        }
      }
    }
  }
}
</style>
